<template>
  <div class="dashboard">
    <div class="vistop">
      <span class="vistop1">软件学院信息</span>

      <!-- 右侧日期时间信息 -->
      <div class="datetime-info">
        <span class="date">{{ currentDate }}</span>
        <span class="time">{{ currentTime }}</span>
      </div>

      <dv-decoration-10 style="margin-left:50px;width:26%;height:5px;" />
      <dv-decoration-10
        style="float: right; margin-right:43px;margin-top: -3px; width:27%;height:5px;transform: scaleX(-1);" />
    </div>

    <div class="dashboard-container">
      <!-- 左侧列 -->
      <div class="column">
        <!-- 上部分 -->
        <div class="box-wrapper top">
          <dv-border-box-8>
            <div class="section-title">教研室评分</div>
            <div class="chart-section">
              <div ref="frontendRadar" class="radar-chart"></div>
              <div class="radarName" style="text-align: center;">{{radarName}}</div>
            </div>
          </dv-border-box-8>
        </div>
        <!-- 下部分 -->
        <div class="box-wrapper bottom">
          <dv-border-box-8 style="width: 45%;padding: 0 8px;float: left;">
            <div class="section-title">项目评分</div>
            <div ref="teacherBar" class="teacherBar"></div>
          </dv-border-box-8>
          <dv-border-box-8 style="width: 45%;padding: 0 8px;float: left;margin-left: 2%;">
            <div class="section-title">教师排名</div>
            <dv-scroll-ranking-board :key="componentKey" :config="config3"
              style="padding-top: 21px;height: 180px;width: 100%;float: left;" />
          </dv-border-box-8>
        </div>
      </div>

      <!-- 中间列 -->
      <div class="column">
        <!-- 上部分 -->
        <div class="box-wrapper top">
          <dv-border-box-8>
            <div class="section-title">软件学院</div>
            <div class="image-container">
              <div class="column_left">
                <div class="column_left-1" style="display: flex;align-items: center;padding-top: 27px;">
                  <img src="../../assets/image/学校 (1).png" alt="" style="width: 34px;">
                  <span
                    style="display: inline-block;font-size: 20px;display: flex;align-items: center;justify-content: center;">全院师生<span
                      style="color: #1296db;font-size: 24px;">2555</span>人</span>
                </div>
                <div class="column_left-2" style="display: flex;align-items: center;;padding-top: 38px;">
                  <img src="../../assets/image/zhuanye.png" alt="" style="width: 30px;">
                  <span
                    style="display: inline-block;font-size: 18px;display: flex;align-items: center;justify-content: center;">开设专业<span
                      style="color: #1296db;font-size: 24px;">{{ person.major }}</span>门</span>
                </div>
                <div class="column_left-3" style="display: flex;align-items: center;padding-top: 30px;">
                  <img src="../../assets/image/老师.png" alt="" style="width: 26px;">
                  <span
                    style="display: inline-block;font-size: 18px;display: flex;align-items: center;justify-content: center;">教师<span
                      style="color: #1296db;font-size: 24px;">{{ person.teacher }}</span>人</span>
                </div>
                <div class="column_left-4" style="display: flex;align-items: center;padding-top: 50px;">
                  <img src="../../assets/image/sdue.png" alt="" style="width: 26px;">
                  <span
                    style="display: inline-block;font-size: 18px;display: flex;align-items: center;justify-content: center;">学生<span
                      style="color: #1296db;font-size: 24px;">{{ Allstudent }}</span>人</span>
                  <div class="year">2022级<span class="year-num">{{ person.student['2022'] }}</span>人</div>
                  <div class="year">2023级<span class="year-num">{{ person.student['2023'] }}</span>人</div>
                  <div class="year">2024级<span class="year-num">{{ person.student['2024'] }}</span>人</div>
                </div>
              </div>
            </div>
          </dv-border-box-8>
        </div>
        <!-- 下部分 -->
        <div class="box-wrapper bottom">
          <dv-border-box-8>
            <div class="section-title">2025届毕业生人数</div>
            <div ref="StudentGraduation" style="margin-left: -10px;"></div>
          </dv-border-box-8>
        </div>
      </div>

      <!-- 右侧列 -->
      <div class="column">
        <!-- 上部分 -->
        <div class="box-wrapper top">
          <dv-border-box-8>
            <div class="section-title" style="padding: 3px 25px;">软件学院</div>
            <div class="chart-section">
              <div ref="studentBarChart" class="bar-chart"></div>
            </div>
          </dv-border-box-8>
        </div>
        <!-- 下部分 -->
        <div class="box-wrapper bottom">
          <dv-border-box-8>
            <div class="section-title">获奖详情</div>
            <div class="award-stats-container">
              <div class="pie-chart-wrapper">
                <div ref="studentPieChart" class="pie-chart"></div>
              </div>
              <div class="stats-list">
                <div v-for="(stat, index) in currentYearStats" :key="index" class="stat-item">
                  <div class="stat-name">{{ stat.name }}</div>
                  <div class="stat-value">
                    {{ stat.value }} 人({{ ((stat.value / calculateTotal()) * 100).toFixed(2) }}%)
                  </div>
                </div>
              </div>
            </div>
          </dv-border-box-8>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  import axios from 'axios'

  export default {
    name: 'Dashboard',
    data() {
      return {
        projects: [],
        indexs: 0,
        radarName:'', //雷达图名称
        leidaMetrics: [],
        leidaValue: [],
        columnarData: [],
        defaultColor: '#007BFF',
        highlightColor: ' #ADD8E6',
        option2: {
          xAxis: {
            type: 'category',
            data: [],
            axisLabel: {
              show: true, // 是否显示X轴的内容，不包含两端的文字
              interval: 0,
              // rotate: '50', // 旋转50°
              lineHeight: 18,
              formatter: function (params) {
                // console.log('formatter', params, params.length)
                var newParamsName = ''// 最终拼接成的字符串
                var paramsNameNumber = params.length// 实际标签的个数
                var provideNumber = 6// 每行能显示的字的个数
                // 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                if (paramsNameNumber > provideNumber) {
                  // ********重点在这里********
                  newParamsName = params.substring(0, 4) + '..'// 最终拼成的字符串
                } else { // 将旧标签的值赋给新标签
                  newParamsName = params
                }
                // 将最终的字符串返回
                return newParamsName
              }
            }
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [],
              type: 'bar',
              itemStyle: {
                color: this.defaultColor
              },
              emphasis: {
                itemStyle: {
                  color: this.highlightColor
                }
              },
              animationDelay: function (idx) {
                return idx * 100;
              }
            }
          ],

        },
        lineStyle: {
          height: 1,
          width: 1,
          opacity: 0.5
        },
        config3: {
          data: [],
          waitTime: 1000
        },
        teacherRadarChart: null,
        studentBarChart: null,
        studentPieChart: null,
        currentYearIndex: 0,
        years: ['2024', '2023', '2022'],
        awardsData: {
          '2024': {
            provincial: [
              { name: '一等奖', value: 4 },
              { name: '二等奖', value: 5 },
              { name: '三等奖', value: 6 }
            ],
            lanqiao: { value: 13 }
          },
          '2023': {
            provincial: [
              { name: '一等奖', value: 7 },
              { name: '二等奖', value: 6 },
              { name: '三等奖', value: 2 }
            ],
            national: [
              { name: '二等奖', value: 2 },
              { name: '三等奖', value: 1 }
            ],
            lanqiao: { value: 19 }
          },
          '2022': {
            provincial: [
              { name: '一等奖', value: 6 },
              { name: '二等奖', value: 5 },
              { name: '三等奖', value: 0 }
            ],
            national: [
              { name: '二等奖', value: 2 }
            ],
            lanqiao: { value: 61 }
          }
        },
        currentYearStats: [],
        imgLists: [
          require("../../assets/image/123.jpg"),
          require("../../assets/image/img1.jpg"),
          require("../../assets/image/img2.jpg")
        ],
        currentImg: "",
        currentIndex: 0,
        timer: null,
        currentDate: '',
        currentTime: '',
        city: '长沙',
        person: {
          all: 3145,
          major: 30,
          teacher: 150,
          student: {
            '2022': 1110,
            '2023': 1003,
            '2024': 1056
          },
        },
        StudentGraduation: null,
        rankingList: [],
        componentKey: "",
      }
    },
    created() {
      this.timechange()
      this.ranking()
    },
    mounted() {
      this.getColumnar()
      this.initStudentGraduation()
      // this.initTeacherRadarChart()
      this.initStudentBarChart()
      this.initStudentPieChart()
      this.startAnimation()
      this.updatePieChart(2024)
      this.currentImg = this.imgLists[0];
      this.startAutoPlay();
      this.startTimeUpdate()
      // 添加窗口大小变化的监听
      window.addEventListener('resize', this.handleResize);
    },
    computed: {
      Allstudent() {
        let all = 0;
        for (let i in this.person.student) {
          all += this.person.student[i];
        }
        return all;
      }
    },
    beforeDestroy() {
      // 移除监听
      window.removeEventListener('resize', this.handleResize);
      if (this.timer) {
        clearInterval(this.timer);
      }
    },
    methods: {
      async timechange() {
        let year = new Date().getFullYear()
        let projectoptions = await this.$get('/api/year/project/' + year)
        this.projects = projectoptions.data
        this.radarName = this.projects[this.indexs].title
        this.leida(this.projects[this.indexs].id)
        setInterval(() => {
          if (this.indexs === this.projects.length - 1) {
            this.indexs = 0
          } else {
            this.indexs++
          }
          this.radarName = this.projects[this.indexs].title
          this.leida(this.projects[this.indexs].id)
        }, 5000);
      },
      //雷达图
      async leida(val) {
        let obj = { projectId: val, year: 2024 };
        await this.$get("/api/radar/chart", obj).then((res) => {      
          let newmetrics = res.data.metrics;
          this.leidaValue = res.data.value;
          // this.leidaValue = newValues.map((value, index) => {
          //   return { name: newmetrics[index], value: value };
          // });
          this.leidaMetrics = [];
          newmetrics.forEach(item => {
            this.leidaMetrics.push({ name: item, max: 5 });
          });
        });
        this.initTeacherRadarChart();
      },
      //柱状图
      async getColumnar() {
        let highlightIndex = 0
        let year = new Date().getFullYear()
        let projectOptions = await this.$get('api/columnar/chart?year=' + year)
        this.columnarData = projectOptions.data
        // this.option2.xAxis.data.push(this.columnarData.x[i])
        // this.option2.series[0].data.push(this.columnarData.y[i])
        this.option2.xAxis.data = this.columnarData.x
        this.option2.series[0].data = this.columnarData.y
        let teacherBar = echarts.init(this.$refs.teacherBar);
        const option2 = this.option2
        // 定义初始的柱子颜色数组，第一个为高亮色
        let initialColors = [this.highlightColor].concat(new Array(this.option2.xAxis.data.length - 1).fill(this.defaultColor));

        teacherBar.setOption(option2);
        teacherBar.setOption({
          series: [{
            itemStyle: {
              color: function (params) {
                return initialColors[params.dataIndex];
              }
            }
          }]
        });

        setInterval(() => {
          // 重置所有柱子的颜色
          var itemStyles = this.option2.xAxis.data.map(() => ({ color: this.defaultColor }));

          // 设置当前高亮柱子的颜色
          itemStyles[highlightIndex].color = this.highlightColor;

          teacherBar.setOption({
            series: [{
              itemStyle: {
                color: function (params) {
                  return itemStyles[params.dataIndex].color;
                }
              }
            }]
          });
          // 更新查询教师排名
          this.ranking(this.projects[highlightIndex].id)
          // 更新高亮索引
          highlightIndex = (highlightIndex + 1) % this.option2.xAxis.data.length;
        }, 20000)
        teacherBar.on('click', (params) => {
          // console.log(123, params)
          // 更新颜色数组
          let colors = new Array(this.option2.xAxis.data.length).fill(this.defaultColor);
          colors[params.dataIndex] = this.highlightColor;
          // 更新图表
          teacherBar.setOption({
            series: [{
              itemStyle: {
                color: function (params) {
                  return colors[params.dataIndex];
                }
              }
            }]
          });
          this.ranking(this.projects[params.dataIndex].id)
        })
      },
      //教师排名
      async ranking(projectId) {
        let obj = { projectId: projectId, page: 1, limit: 20 }
        await this.$get("/api/project/assess/list", obj).then((res) => {
          this.rankingList = res.list
          this.config3.data = []
          this.rankingList.map(item => {
            this.config3.data.push({ name: item.nickName, value: item.score })
          });
          this.componentKey = Math.random();
        });
      },
      initStudentGraduation() {
        const Graduation = this.$refs.StudentGraduation
        Graduation.style.width = '100%'
        Graduation.style.height = '100%'
        this.StudentGraduation = echarts.init(Graduation)

        const option = {
          color: ['#3AA1FF'],
          title: {
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter:
              '{b} <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{c}'
          },
          grid: {
            left: '4%',
            right: '4%',
            bottom: '2%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            min: 0,
            max: 358,
            interval: 50,
            axisLabel: {
              formatter: '{value}人',
              textStyle: {
                fontWeight: '80'
              }
            }
          },
          yAxis: {
            type: 'category',
            data: [
              '软件技术(web前端)',
              '区块链技术应用',
              '虚拟现实技术应用',
              '云计算技术应用',
              '软件技术(企业应用开发)',
              '软件技术(游戏应用开发)'
            ],
            axisLabel: {
              show: true,
              interval: 0,
              rotate: 0,
              margin: 10,
              inside: false,
              textStyle: {
                color: '#ffffff',
                fontWeight: '50'
              }
            }
          },
          series: [
            {
              type: 'bar',
              label: {
                normal: {
                  show: true,
                  formatter: function (v) {
                    var val = v.data;
                    if (val === 0) {
                      return '';
                    }
                    return val;
                  },
                  color: '#fff'
                }
              },
              data: [201, 183, 132, 188, 220, 186]
            }
          ]
        };
        this.StudentGraduation.setOption(option)
      },
      initTeacherRadarChart() {
        // 雷达图
        let frontendRadar = echarts.init(this.$refs.frontendRadar);
        const option1 = {
          title: {
            text: '软件学院',
            left: 'center',
            top: '0%',
            textStyle: {
              color: '#eee',
              fontSize: 14,
            }
          },
          legend: {
            bottom: -30,
            data: ['软件学院'],
            itemGap: 20,
            textStyle: {
              color: '#fff',
              fontSize: 14
            },
            selectedMode: 'single'
          },
          radar: {
            indicator: this.leidaMetrics,
            center: ['50%', '60%'],
            radius: '65%',
            shape: 'circle',
            splitNumber: 5,
            axisName: {
              color: 'rgb(59,222,252)',
              fontSize: 14,
              padding: [15, 20]
            },
            splitLine: {
              lineStyle: {
                color: [
                  'rgba(59,222,252, 0.1)',
                  'rgba(59,222,252, 0.2)',
                  'rgba(59,222,252, 0.4)',
                  'rgba(59,222,252, 0.6)',
                  'rgba(59,222,252, 1)'
                ].reverse()
              }
            },
            splitArea: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(59,222,252, 0.5)'
              }
            }
          },
          series: [
            {
              name: '软件学院',
              type: 'radar',
              lineStyle: this.lineStyle,
              data: [this.leidaValue],
              symbol: 'none',
              itemStyle: {
                color: '#00B2FF'
              },
              areaStyle: {
                opacity: 0.1
              },
              label: {
                show: true,
                formatter: function (params) {
                  return params.value;
                }
              }
            },
          ]
        };
        frontendRadar.setOption(option1);
        // 柱状图
        // let teacherBar = echarts.init(this.$refs.teacherBar);
        // const option2 = this.option2
        // teacherBar.setOption(option2);
      },
      calculateTotalAwards(year) {
        const yearData = this.awardsData[year]
        let total = 0
        if (yearData.provincial) {
          total += yearData.provincial.reduce((sum, award) => sum + award.value, 0)
        }
        if (yearData.national) {
          total += yearData.national.reduce((sum, award) => sum + award.value, 0)
        }
        if (yearData.lanqiao) {
          total += yearData.lanqiao.value
        }
        return total
      },
      initStudentBarChart() {
        const chartContainer = this.$refs.studentBarChart;
        chartContainer.style.width = '100%';
        chartContainer.style.height = '100%';

        this.studentBarChart = echarts.init(chartContainer);
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          legend: {
            data: ['蓝桥杯', '省赛', '国赛', '全部获奖'],
            textStyle: {
              color: '#fff',
              fontSize: 12
            },
            right: 10,
            top: 5,
            itemWidth: 15,
            itemHeight: 10
          },
          grid: {
            top: '25%',
            left: '8%',
            right: '8%',
            bottom: '12%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: this.years,
            axisLine: {
              lineStyle: {
                color: '#00F5FF'
              }
            },
            axisLabel: {
              color: '#fff',
              fontSize: 12
            }
          },
          yAxis: [
            {
              type: 'value',
              name: '获奖数量',
              nameTextStyle: {
                color: '#fff',
                fontSize: 12
              },
              axisLine: {
                lineStyle: {
                  color: '#00F5FF'
                }
              },
              splitLine: {
                lineStyle: {
                  color: 'rgba(0, 245, 255, 0.1)'
                }
              },
              axisLabel: {
                color: '#fff',
                fontSize: 12
              }
            }
          ],
          series: [
            {
              name: '获奖总数',
              type: 'bar',
              barWidth: '40%',
              data: this.years.map((year, index) => ({
                value: this.calculateTotalAwards(year),
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: index === this.currentYearIndex ? '#ffd700' : '#0B4FA1'
                  }, {
                    offset: 1,
                    color: index === this.currentYearIndex ? '#ffa500' : '#38D0FF'
                  }])
                }
              })),
              z: 1
            },
            {
              name: '蓝桥杯',
              type: 'line',
              data: [13, 19, 61], // 2024, 2023, 2022
              smooth: true,
              symbol: 'circle',
              symbolSize: 6,
              lineStyle: {
                color: '#ffd700',
                width: 2
              },
              itemStyle: {
                color: '#ffd700'
              },
              z: 2
            },
            {
              name: '省赛',
              type: 'line',
              data: [15, 15, 11], // 2024, 2023, 2022
              smooth: true,
              symbol: 'circle',
              symbolSize: 6,
              lineStyle: {
                color: '#00F5FF',
                width: 2
              },
              itemStyle: {
                color: '#00F5FF'
              },
              z: 2
            },
            {
              name: '国赛',
              type: 'line',
              data: [0, 3, 2], // 2024, 2023, 2022
              smooth: true,
              symbol: 'circle',
              symbolSize: 6,
              lineStyle: {
                color: '#4ECB73',
                width: 2
              },
              itemStyle: {
                color: '#4ECB73'
              },
              z: 2
            },
            {
              name: '全部获奖',
              type: 'line',
              data: [28, 37, 74], // 2024, 2023, 2022
              smooth: true,
              symbol: 'circle',
              symbolSize: 6,
              lineStyle: {
                color: '#FF69B4',
                width: 2,
                type: 'dashed'
              },
              itemStyle: {
                color: '#FF69B4'
              },
              z: 2
            }
          ]
        };

        this.studentBarChart.setOption(option);
      },
      startAnimation() {
        setInterval(() => {
          this.currentYearIndex = (this.currentYearIndex + 1) % this.years.length
          const barOption = this.studentBarChart.getOption()
          const newData = this.years.map((year, index) => ({
            value: this.calculateTotalAwards(year),
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: index === this.currentYearIndex ? '#ffd700' : '#0B4FA1'
              }, {
                offset: 1,
                color: index === this.currentYearIndex ? '#ffa500' : '#38D0FF'
              }])
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: '#ffd700'
                }, {
                  offset: 1,
                  color: '#ffa500'
                }])
              }
            }
          }))
          barOption.series[0].data = newData
          this.studentBarChart.setOption(barOption)
          this.updatePieChart(this.years[this.currentYearIndex])
        }, 5000)
      },
      updatePieChart(year) {
        const yearData = this.awardsData[year]
        const pieData = []
        this.currentYearStats = []

        if (yearData.provincial) {
          yearData.provincial.forEach(award => {
            pieData.push({
              name: `省赛${award.name}`,
              value: award.value
            })
            this.currentYearStats.push({
              name: `省赛${award.name}`,
              value: award.value
            })
          })
        }

        if (yearData.national) {
          yearData.national.forEach(award => {
            pieData.push({
              name: `国赛${award.name}`,
              value: award.value
            })
            this.currentYearStats.push({
              name: `国赛${award.name}`,
              value: award.value
            })
          })
        }

        if (yearData.lanqiao) {
          pieData.push({
            name: '蓝桥杯省三以上',
            value: yearData.lanqiao.value
          })
          this.currentYearStats.push({
            name: '蓝桥杯省三以上',
            value: yearData.lanqiao.value
          })
        }

        const option = this.createPieChartOption(year, pieData)
        this.studentPieChart.setOption(option)
      },
      initStudentPieChart() {
        const chartContainer = this.$refs.studentPieChart;
        chartContainer.style.width = '100%';
        chartContainer.style.height = '100%';

        this.studentPieChart = echarts.init(this.$refs.studentPieChart);
        const initialYear = this.years[0];
        const option = this.createPieChartOption(initialYear);
        this.studentPieChart.setOption(option);
      },
      createPieChartOption(year, pieData = []) {
        const total = pieData.reduce((sum, item) => sum + item.value, 0);

        return {
          backgroundColor: 'transparent',
          title: {
            text: `${year}年学生获奖情况`,
            left: 'center',
            top: 20,
            textStyle: {
              color: '#00F5FF',
              fontSize: 16,
              fontWeight: 'bold'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} ({d}%)'
          },
          legend: {
            show: false
          },
          series: [
            {
              name: '获奖分布',
              type: 'pie',
              radius: ['30%', '60%'],
              center: ['50%', '55%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderColor: '#001529',
                borderWidth: 2
              },
              label: {
                show: true,
                position: 'outside',
                formatter: '{b}: {c}\n{d}%',
                fontSize: 10,
                color: '#fff',
                alignTo: 'edge',
                edgeDistance: '10%',
                lineHeight: 15
              },
              labelLine: {
                length: 10,
                length2: 20,
                smooth: true
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 12,
                  fontWeight: 'bold'
                },
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 245, 255, 0.5)'
                }
              },
              data: pieData.map((item, index) => ({
                ...item,
                itemStyle: {
                  color: this.getPieChartColor(index)
                }
              }))
            }
          ]
        };
      },
      getPieChartColor(index) {
        const colors = ['#3AA1FF', '#36CBCB', '#4ECB73', '#FBD437'];
        return colors[index % colors.length];
      },
      startAutoPlay() {
        this.timer = setInterval(() => {
          this.currentIndex = (this.currentIndex + 1) % this.imgLists.length;
          this.currentImg = this.imgLists[this.currentIndex];
        }, 5000);
      },
      startTimeUpdate() {
        this.updateDateTime()
        this.timer = setInterval(this.updateDateTime, 1000)
      },
      updateDateTime() {
        const now = new Date()
        const weekDays = ['日', '一', '二', '三', '四', '五', '六']
        this.currentDate = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} 星期${weekDays[now.getDay()]}`
        this.currentTime = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`
      },
      calculateTotal() {
        return this.currentYearStats.reduce((sum, stat) => sum + stat.value, 0);
      },
      // 处理窗口大小变化
      handleResize() {
        this.studentBarChart && this.studentBarChart.resize();
        this.studentPieChart && this.studentPieChart.resize();
        this.frontendRadar && this.frontendRadar.resize();
        this.backendRadar && this.backendRadar.resize();
        this.StudentGraduation && this.StudentGraduation.resize();
      }
    }
  }
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
  }

  .dashboard {
    background-color: #020608;
    color: #fff;
    height: 100%;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

  }

  .dashboard-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 20px;
    padding: 20px;
    height: calc(100vh - 130px);
  }

  .chart-section {
    padding: 20px;
    height: 100%;
    padding-top: 10px;
  }

  .section-title {
    color: #00F5FF;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(0, 195, 255, 0.3);
    position: absolute;
    left: 20px;
    top: -12px;
    z-index: 10;
    padding: 3px 25px;
    border-radius: 4px;
    background: linear-gradient(to right, rgba(0, 16, 81, 0.9), rgba(0, 16, 81, 0.5));
    border: 1px solid rgba(0, 245, 255, 0.3);
    white-space: nowrap;
    height: 24px;
    line-height: 24px;
  }

  .section-title::before,
  .section-title::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00F5FF;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 0 8px rgba(0, 245, 255, 0.8);
  }

  .section-title::before {
    left: 10px;
  }

  .section-title::after {
    right: 10px;
  }

  .radar-chart,
  .bar-chart {
    height: 240px;
    margin-bottom: 0px;
  }

  .pie-chart-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }

  .pie-chart {
    width: 100%;
    height: 100%;
    z-index: 98;
  }

  .vistop {
    position: relative;
    width: 100%;
    height: 100px;
    background: url(../../assets/image/top1.png) center no-repeat;
    background-size: cover;
    text-align: center;
    font-size: 36px;
  }

  .vistop1 {
    width: 100%;
    height: 65px;
    line-height: 65px;
    background: url(../../assets/image/top2.png) left no-repeat;
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 195, 255, 0.5);
  }

  .datetime-info {
    position: absolute;
    right: 20px;
    top: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    background: linear-gradient(to left, rgba(0, 16, 81, 0.8), rgba(0, 16, 81, 0));
    padding: 8px 15px;
    border-radius: 4px;
    backdrop-filter: blur(5px);
    margin-right: 30px;
  }

  .date {
    color: #00F5FF;
    font-size: 18px;
    text-shadow: 0 0 10px rgba(59, 222, 252, 0.3);
    font-weight: bold;
  }

  .time {
    color: #00F5FF;
    font-size: 18px;
    font-family: 'Digital-7', monospace;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(56, 208, 255, 0.3);
    font-weight: bold;
    margin-top: 3px;
  }

  .radar-chart {
    width: 100%;
    height: 280px;
    margin: 0 auto;
  }

  .radar-chart:first-child {
    left: 5%;
  }

  .radar-chart:last-child {
    right: 5%;
  }


  .radar-chart:first-child {
    left: 5%;
  }

  .radar-chart:last-child {
    right: -50%;
  }

  .column {
    height: 88%;
    display: flex;
    flex-direction: column;
    gap: 3%;
  }

  .column:first-child .box-wrapper.top,
  .column:last-child .box-wrapper.top {
    height: 58.5%;
  }

  .column:first-child .box-wrapper.bottom,
  .column:last-child .box-wrapper.bottom {
    height: 38.5%;
  }

  .column:nth-child(2) .box-wrapper.top {
    height: 53.5%;
  }

  .column:nth-child(2) .box-wrapper.bottom {
    height: 43.5%;
  }

  .box-wrapper {
    width: 100%;
    position: relative;
  }

  .dv-border-box-8 {
    width: 100%;
    height: 100%;
  }

  .column:last-child .box-wrapper.top {
    height: 40%;
  }

  .column:last-child .box-wrapper.bottom {
    height: 57%;
  }

  .column:last-child .box-wrapper.top .bar-chart {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 0;
    margin: 0;
  }

  .column:last-child .box-wrapper.top .chart-section {
    position: relative;
    height: 100%;
    padding: 0;
    margin: 0;
  }

  .column:last-child .box-wrapper.top .section-title {
    margin-bottom: 0;
    padding: 10px 0;
  }

  .column:last-child .box-wrapper.bottom .pie-chart {
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0;
  }

  .column:last-child .chart-section {
    position: relative;
    height: calc(100% - 60px);
    padding: 20px;
  }

  .image-container {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    overflow: hidden;
    background-image: url('../../assets/image/niaokan1.png');
    background-position: center;
    background-size: 100%;

  }

  .award-stats-container {
    display: flex;
    height: 100%;
    padding: 20px;
  }

  .pie-chart-wrapper {
    width: 75%;
    height: 100%;
  }

  .stats-list {
    width: 25%;
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    font-size: 10px;
    margin-top: -5vh;
  }

  .stat-item {
    background: rgba(0, 245, 255, 0.1);
    border-radius: 4px;
    padding: 4px;
    margin-bottom: 2px;
    font-size: 12px;
  }

  .stat-name {
    color: #fff;
    margin-bottom: 4px;
  }

  .stat-value {
    color: #00F5FF;
    font-weight: bold;
  }

  .year {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 20px;
  }

  .year-num {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #1296db;
  }

  .teacherBar {
    float: left;
    width: 100%;
    height: 100%;
  }
</style>